<template>
    <div class="WacthView" v-for="(item, index) in Options" :key="index">
        Wacth(
        <a-select v-model="item.key" style="width: 100px" size="small">
            <a-select-option v-for="key in keyArray" :key="key" :value="key">{{ key }}</a-select-option>
        </a-select>
        ), (val) => {
        <Event
            v-for="(Event, index) in item.Events"
            :index="index"
            :Event="Event"
            :keyArray="keyArray"
            @DeleteItem="DeleteItem(item.Events, index)"
        />
        <div style="padding: 16px 0 0 20px">
            <a-button shape="circle" @click="AddEvent(item.Events)">
                <template #icon><PlusOutlined /></template>
            </a-button>
        </div>
        <br />
        }, {
        <div style="padding: 4px 0 4px 20px">
            <a-checkbox v-model:checked="item.deep">深度监听 ( deep )</a-checkbox>
        </div>
        <div style="padding: 4px 0 4px 20px">
            <a-checkbox v-model:checked="item.immediate">立即执行 ( immediate )</a-checkbox>
        </div>
        });
        <a-popconfirm title="是否删除？" @confirm="DeleteItem(Options, index)">
            <span class="Delete">
                <delete-outlined />
            </span>
        </a-popconfirm>
    </div>
    <a-button shape="circle" @click="AddOptions">
        <template #icon><PlusOutlined /></template>
    </a-button>

    <a-button @click="ExportFile"> 导出</a-button>
    <a-modal v-model:visible="ExportVisible" title="导出" :width="800" destroyOnClose @ok="ExportFile" okText="下载文件">
        <a-textarea v-model:value="ExportValue" :autoSize="{ minRows: 30, maxRows: 30 }"></a-textarea>
    </a-modal>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { DeleteOutlined, PlusOutlined } from "@ant-design/icons-vue";
import Event from "./Event.vue";
import Rules from "./Rules.vue";

const keyArray = reactive(["A", "B", "C"]);

const Options = ref([
    {
        key: "",
        Events: [
            {
                FormKey: "",
                FunKey: "",
                EventKey: "",
                ValueType: "direct",
                Value: "",
            },
        ],
        deep: false,
        immediate: false,
    },
]);

const AddEvent = (Events) => {
    Events.push({
        FormKey: "",
        FunKey: "",
        EventKey: "",
        ValueType: "direct",
        Value: "",
    });
};
const AddOptions = () => {
    Options.value.push({
        key: "",
        Events: [
            {
                FormKey: "",
                FunKey: "",
                EventKey: "",
                ValueType: "direct",
                Value: "",
            },
        ],
        deep: false,
        immediate: false,
    });
};

const DeleteItem = (Events, index) => {
    Events.splice(index, 1);
};
watch(
    Options,
    (val) => {
        console.log(val);
    },
    { deep: true }
);

const ExportVisible = ref(false);
const ExportValue = ref("");

const ExportFile = () => {
    // console.log();
    ExportValue.value = JSON.stringify(Options.value, null, "  ");
    ExportVisible.value = true;
};
</script>
<style lang="less" scoped>
.Delete {
    padding: 0 8px;
    cursor: pointer;
}
.WacthView {
    padding: 16px;
}
</style>
